<template>
	<el-card 
		style="height: 100%"
		body-style="height: 90%;padding: 0">
		<div slot="header">
			<span>{{ chart.title }}</span>
			<el-button style="float:right;margin-top: 11px;" type="primary" @click="onRefresh">刷新</el-button>
		</div>
		<wt-chart
			ref="chart"
			:query="chart.query"
			:options="chart.options"
			:value="value"
			:custom-data="chart.customData"
			>
		</wt-chart>
	</el-card>
</template>
<script>
	/*
	 * 在wt-chart组件的基础上，对齐进行一个box外观的包装
	 */
	import Vue from 'vue';
	import ElementUI from 'element-ui';
	import Chart from './wt-chart';

	Vue.use(ElementUI);
	Vue.component(Chart.name, Chart);

	export default {
		name: 'wt-chart-box',
		props: {
			chart: {
				type: Object,
				requried: true
			},
            value:{
                type: Array,
				default: null
			}
		},
		methods: {
			onRefresh: function() {
				this.$refs.chart.load();
			}
		}
	}
</script>
<style>
	.el-card__header{
		min-height: 57px;
		line-height: 57px;
		padding: 0 20px!important;
	}
</style>